<template>
    <el-dialog
        title="自定义筛选"
        :visible.sync="dialogVisible"
        width="50%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="handleClose">
        <div class="dialog-container">
            <el-form>
                <el-row
                    v-for="item in list"
                    :key="item.randomId">
                    <el-col :span="7">
                        <el-form-item label="筛选字段">
                            <mt-select
                                v-model="item.key"
                                :options="selectOptions"
                                placeholder="请选择筛选字段"
                                :width="inputWidth">
                            </mt-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="筛选条件">
                            <mt-dictionary
                                v-model="item.condition"
                                placeholder="请选择筛选字段"
                                dict="Db1058789"
                                :width="inputWidth"></mt-dictionary>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="限定值">
                            <mt-input
                                v-model="item.value"
                                placeholder="输入限定值"
                                :width="inputWidth">
                            </mt-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <div class="delete-btn" @click="deleteLine(item)">
                            <img src="@/assets/icon/delete.svg" />
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="add-btn" @click="addLine">
                            <img src="@/assets/icon/add.svg" />
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                <mt-button @click="handleSubmit">确定</mt-button>
                <mt-button type="submain" @click="handleClose">取消</mt-button>
        </span>
    </el-dialog>
</template>
  
<script>
export default {
    name: "FilterConfig",

    props: {
        type: {
            type: String,
            default: ""
        }
    },
  
    data () {
        return {
            list: [],
            selectOptions: [
                { value: "key1", label: "筛选字段1" },
                { value: "key2", label: "筛选字段2" },
                { value: "key3", label: "筛选字段3" }
            ],
            dialogVisible: false,
            inputWidth: "calc(100% - 20px)"
        };
    },
  
    created () {
        this.getList();
    },
  
    mounted () {},
  
    methods: {
        /* 触发弹窗 */
        open () {
            this.dialogVisible = true;
        },

        /* 获取筛选条件 */
        async getList () {
            const params = { deviceNumber: SETTING.deviceNumber[this.type] };
            this.$request.post(this.API.GET_FILTER_LIST, params).then(res => {
                if (res.success) {
                    // console.log("配置项:", res.data.list);
                    this.selectOptions = res.data.list;
                }
            })
        },

        /* 新增一行 */
        addLine () {
            if (this.list.length) {
                const item = this.list[this.list.length - 1];
                if (!item.key || !item.condition || !item.value) {
                    this.$mtMessage.error("请先完善上一行筛选条件");
                    return;
                }
            }
            this.list.push({
                randomId: Math.random().toString(36).substr(2),
                label: "",
                key: "",
                condition: "",
                value: ""
            });
        },
        /* 删除一行 */
        deleteLine (item) {
            const index = this.list.indexOf(item);
            this.list.splice(index, 1);
        },
    
        /* 点击确定 */
        handleSubmit () {
            this.list.forEach(item => {
                const match = this.selectOptions.find(i => {
                    return i.value === item.key;
                });
                item.label = match ? match.label : "";
            });
            this.$emit("submit", this.list);
            this.handleClose();
        },
    
        /* 弹窗关闭 */
        handleClose () {
            this.dialogVisible = false;
        }
    }
};
</script>
  
<style lang="scss" scoped>
.dialog-container {
    max-height: 500px;
    overflow: auto;
    ::-webkit-scrollbar {
        display: none;
    }
    .delete-btn {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        height: 54px;
        cursor: pointer;
        img {
            width: 18px;
            height: 18px;
        }
    }
    .add-btn {
        height: 60px;
        padding: 10px 0;
        cursor: pointer;
        border: 1px dashed #dcdfe6;
        transition: border 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        &:hover {
            border: 1px dashed #409eff;
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
  